<template>
    <div class="container">
        <Header></Header>
        <div class="content">
            <img class="content_topImg" src="./images/background_top.png" alt="">
            <div class="group">
                <img src="./images/enroll_title1.png" alt="提交作品方式">
                <!-- <div class="text red">
                    01
                </div> -->
                <div class="text red">
                    韶華杯青少年美育系列活动作品提交方式
                </div>
                <div class="text">
                    参选者需将书画、朗诵、征文专项活动作品均以电子版形式<br>
                    提交至活动官方组委会/授权组织单位/承办单位。
                </div>
                <!-- <div class="text red">
                    02
                </div>
                <div class="text red">
                    征文系列活动作品提交方式
                </div>
                <div class="text">
                    所有征文系列活动作品均以电子版形式提交至活动组委会<br>
                    授权单位或组委会官方邮箱<br>
                    shaohuawork@126.com<br>
                </div>
                <div class="text red">
                    03
                </div>
                <div class="text red">
                    朗诵系列活动作品提交方式
                </div>
                <div class="text">
                    所有朗诵系列活动作品均以电子版形式提交至活动组委会授<br>
                    权单位或组委会官方邮箱<br>
                    shaoh0317@163.com<br>
                </div> -->
            </div>
            <div class="group">
                <img src="./images/enroll_title2.png" alt="活动流程">
                <div class="process">
                    <div class="processItem">
                        <div class="text red">
                            省赛截稿时间和评审时间
                        </div>
                        <div class="text">
                            省赛截稿<br>
                            2024 年 12 月 25 日<br>
                        </div>
                        <div class="centerline"></div>
                        <div class="text">
                            省赛评审时间<br>
                            每月 25 号集中评审一次
                        </div>
                    </div>
                    <div class="processItem">
                        <div class="text red">
                            国赛提前批和国赛截稿时间
                        </div>
                        <div class="text">
                            国赛提前批截稿<br>
                            2025 年 8 月 31 日<br>
                        </div>
                        <div class="centerline"></div>
                        <div class="text">
                            国赛截稿时间<br>
                            2026 年 1 月 25 日
                        </div>
                    </div>
                    <div class="processItem">

                    </div>
                </div>
            </div>
            <div class="group">
                <img src="./images/enroll_title3.png" alt="优秀作品出版">
                <div class="text">
                    优秀参选作品可由出版指导单位北京文学期刊中心《东方少年》杂志刊登，并获得《东方少年》系列杂志当期出版期刊和作品出版证书。
                </div>
                <div class="excellentWork">
                    <div>
                        <img src="./images/excellentWork1.jpg" alt="学生出版作品">
                    </div>
                    <div>
                        <img src="./images/excellentWork2.jpg" alt="学生出版作品">
                    </div>
                    <div>
                        <img src="./images/excellentWork3.jpg" alt="学生出版作品">
                    </div>
                    <div>
                        <img src="./images/excellentWork4.jpg" alt="学生出版作品">
                    </div>
                </div>
            </div>
            <div class="group">
                <img src="./images/enroll_title4.png" alt="免责须知">
                <div class="text">
                    1、投稿作者享有作品署名权；<br>
                    2、作品所有权归“韶華杯青少年美育系列活动”组委会所有，活动组委会有权使用参赛作品进行出版物出版、媒体报道、网络渠道发表、印刷以及艺术展览。<br>
                    3、投稿视为认可该事项声明。
                </div>
            </div>
            <div class="group">
                <img src="./images/enroll_title5.png" alt="官方电话">
                <div class="phone">
                    <img src="./images/phone.png" alt="电话图标">
                    <div>
                        010-60526023
                    </div>
                </div>
            </div>
            <div class="footer">
                <Footer></Footer>
            </div>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '@/components/Header/Header.vue';

export default {
    name: 'enroll',
    components: {
        Header, Footer
    },
    data() {
        return {

        };
    },
    methods: {

    }
}
</script>
<style scoped>
.content {
    width: 100%;
    text-align: center;
}

.content_topImg {
    width: 100%;
    margin-top: -1vw;
}

.text {
    font-size: 35px;
    letter-spacing: 10px;
    line-height: 60px;
}

.red {
    color: #BF272D;
}

.group {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 5vw;
}

.group img {
    width: 18vw;
    margin-bottom: 2vw;
}

.group .topic_title {
    width: 35vw;
    margin: 1vw auto;
}

.process {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.processItem {
    width: 40%;
}

.centerline {
    width: 0;
    border: 1px solid #000;
    height: 4vw;
    margin: 0 auto;
}

.excellentWork {
    width: 100%;
    display: flex;
    justify-content: center;
}

.excellentWork div {
    width: 15%;
    transition: width 1s ease;
}

.excellentWork div:hover {
    width: 18vw;
}

.excellentWork div:last-child {
    width: 18vw;
}

.excellentWork img {
    width: 18vw;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.35);
}

.phone {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
}

.phone img {
    width: 3vw;
    height: 3vw;
    margin: 0;
    margin-right: 2vw;
}

.footer {
    width: 100%;
    height: 10vw;
}

/* 横屏小分辨率 */
@media (min-width: 1401px) and (max-width: 2100px) {
    .text {
        font-size: 28px;
        letter-spacing: 8px;
        line-height: 50px;
    }
}

@media (min-width: 961px) and (max-width: 1400px) {
    .text {
        font-size: 20px;
        letter-spacing: 5px;
        line-height: 40px;
    }
}

/* 手机/小屏幕 */
@media (max-width: 960px) {
    .text {
        font-size: 15px;
        letter-spacing: 4px;
        line-height: 30px;
    }

    .group img {
        width: 35vw;
    }

    .group .topic_title {
        width: 50vw;
    }

    .processItem {
        width: 100%;
        margin-top: 2vw;
    }

    .centerline {
        height: 6vw;
    }

    .excellentWork div {
        width: 20%;
    }

    .excellentWork div:hover {
        width: 25vw;
    }

    .excellentWork div:last-child {
        width: 25vw;
    }

    .excellentWork img {
        width: 25vw;
        box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.35);
    }

    .phone {
        font-size: 20px;
    }

    .phone img {
        width: 7vw;
        height: 7vw;
        margin: 0;
        margin-right: 3vw;
    }

    .footer {
        height: 25vw;
    }
}
</style>